<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        添加收款合同
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>
    /* .layui-form-label {
        width: 112px !important;
    } */
    .layui-tab {
        /* text-align: left !important;
        margin: 10px 0px; */
        overflow: auto !important;
    }
    .layui-upload-file {
        height: 0 !important;
    }

    .uploader-list {
        margin-left: -15px;
    }

    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle span {
        margin-right: 5px;
    }

    .uploader-list .handle span:hover {
        cursor: pointer;
    }

    .uploader-list .file-iteme {
        margin: 12px 0 0 15px;
        padding: 1px;
        float: left;
    }

</style>

<body>
<div class="x-body" id="app">
    <form class="layui-form layui-form-pane" id="add">
        <div class="layui-tab-content">

            <div class="layui-form-item" style="margin-top: 8px;">
                <div style="display:inline-block;width: 50%">
                    <label class="layui-form-label">入库来源<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input  autocomplete="off"  type="radio" name="joinWarehouseType" value="0" title="员工采购" checked="">
                    </div>
                </div>
                <div style="display:inline-block;">
                    <label class="layui-form-label">库房类型<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input  autocomplete="off"  type="radio" name="warehouseType" value="0" title="场地库" checked="">
<!--                        <input  autocomplete="off"  type="radio" name="warehouseType" value="1" title="个人">-->
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">库房名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select id="warehouseId" name="warehouseId" lay-filter="warehouseId" lay-verify="required">
                        <option value="">请选择库房</option>
<!--                        <option v-for='item in warehouse' :value="item.id">{{item.name}}</option>-->
                    </select>
                </div>
            </div>

            <span style="font-weight:bold">选择入库配件信息<span style="color: red;">*</span>
                <a class="layui-btn layui-btn-sm layui-btn-normal" onclick='openSelectPartsModal()' style="float: right">
                    选择配件
                </a>
            </span>
            <div class="layui-form-item" style="margin-top: 8px;">
                <table class="layui-table" >
                    <thead>
                    <tr>
                        <th>物料号</th>
                        <th>配件名称</th>
                        <th>规格型号</th>
                        <th>入库数量<span style="color: red;">*</span></th>
                        <th>配件单价<span style="color: red;">*</span></th>
<!--                        <th>配件总价<span style="color: red;">*</span></th>-->
                        <th>供应商<span style="color: red;">*</span></th>
                        <th>配件备注</th>
                        <th colspan="2">存放位置</th>
                        <th>配件图片</th>
                        <th>采购凭证</th>
<!--                        <th>操作</th>-->
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(item,index) in jsonDataMaterialInPartsList'>
                            <td>{{item.partsNum}}</td>
                            <td>{{item.partsName}}</td>
                            <td>{{item.specification}}</td>
                            <td>
                                <input  autocomplete="off"  v-model="item.joinCount"
                                        style="width:70px" id="joinCount" name="joinCount" placeholder="数量≥0" class="layui-input"
                                       type="number" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
<!--                                <input  autocomplete="off"  @input="getNum" type="number" id="joinCount" name="joinCount"  lay-verify="required" placeholder="数量>0" class="layui-input">-->
                            </td>
                            <td>
                                <input  autocomplete="off"  v-model="item.partsOneprice"
                                        style="width:70px" id="partsOneprice" name="partsOneprice" placeholder="单价≥0" class="layui-input"
                                       type="number" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
                            </td>
<!--                            <td>-->
<!--                                <input  autocomplete="off"  v-model="item.partsAllprice" type="text" name="joinCount"  placeholder="0" class="layui-input">-->
<!--                            </td>-->
                            <td @click="openSelectGysModal(index)">
                                <input  autocomplete="off"  type="text" name="supplierName1" lay-filter="supplierName1"
                                       placeholder="选择供应商" class="layui-input" v-model="item.supplierGys.supplierName">
                            </td>
                            <td>
                                <input  autocomplete="off"  type="text" name="partsmsgRemark" lay-filter="partsmsgRemark" placeholder="配件备注" class="layui-input" v-model="item.partsmsgRemark">
                            </td>
                            <td>
                                <input  autocomplete="off"  type="text" name="site" lay-filter="site" placeholder="存放位置" class="layui-input" v-model="item.site">
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" @click="openEditPage(index,item.siteImg,1)">
                                    <i class="layui-icon">&#xe64a;</i>
                                    {{item.siteImgNum}}
                                </a>
<!--                                <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">-->
<!--                                    <i class="layui-icon">&#xe64a;</i>-->
<!--                                </button>-->
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" @click="openEditPage(index,item.partsmsgImg,2)">
                                    <i class="layui-icon">&#xe64a;</i>
                                    {{item.partsmsgImgNum}}
                                </a>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" @click="openEditPage(index,item.payEvidenceImg,3)">
                                    <i class="layui-icon">&#xe64a;</i>
                                    {{item.payEvidenceImgNum}}
                                </a>
                            </td>
<!--                            <td>-->
<!--                                <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">-->
<!--                                    <i class="layui-icon">&#xe640;</i>-->
<!--                                </button>-->
<!--                            </td>-->
                        </tr>
                    </tbody>
                </table>
            </div>
            <span style="color: red">注：配件信息中必填信息提交后不可修改</span>
<!--            <span style="color: red;display:inline-block;float: right">共计：{{totalQian}}元</span>-->

            <div class="layui-form-item" style="margin-top: 8px;">
                <label class="layui-form-label">采购人员<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select name="buyerId" lay-filter="buyerId" lay-verify="required">
                        <option value="">采购人员</option>
                        <option v-for='item in buyerUser' :value="item.id+'-'+item.nickname">{{item.nickname}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入库人员<span style="color: red;">*</span></label>
                    <div class="layui-input-inline">
                        <input  autocomplete="off"  type="text" class="layui-input" readonly="readonly" v-model='nowLoginUser.nickname'>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">入库日期<span style="color: red;">*</span></label>
                    <div class="layui-input-inline">
                        <input  autocomplete="off"  type="text" name="joinTime" lay-verify="required" id="joinTime" lay-filter="joinTime" class="layui-input" placeholder="请选择签订日期" style="width:247px;">
                    </div>
                </div>

            </div>

            <span style="font-weight:bold">备注信息</span>
            <div class="layui-form-item layui-form-text" style="margin-top: 8px;">
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="备注信息" class="layui-textarea"></textarea>
                </div>
            </div>

            <span style="font-weight:bold">其他凭证</span>
            <div class="layui-upload"  style="margin-top: 8px;">
<!--                <button type="button" class="layui-btn" id="upImage">重新上传</button>-->
<!--                <div class="layui-upload-list" >-->
<!--                    <img class="layui-upload-img" id="demo1" style="width: auto;height:150px;">-->
<!--                    <p id="demoText"></p>-->
<!--                </div>-->
                <button type="button" class="layui-btn" id="test2">凭证上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    凭证预览：
                    <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">

                    </div>
                </blockquote>
            </div>

        </div>
        <div style="text-align: center" class="layui-form-item">
            <button class="layui-btn" type="button" lay-filter="sub" lay-submit="sub">
                保存
            </button>
        </div>
    </form>

    <!-- 选择配件  弹窗  开始 -->
    <div class="modal fade" id="selectPartsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        选择配件
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="layui-form x-center" id="searchPartsForm">
                        <div class="layui-form-pane">
                            <div class="layui-form-item" style="padding-left: 3%">
                                <label class="layui-form-label">物料号</label>
                                <div class="layui-input-inline">
                                    <input  autocomplete="off"  type="text" class="layui-input" name="partsNum" placeholder="物料号">
                                </div>
                                <label class="layui-form-label">配件名称</label>
                                <div class="layui-input-inline">
                                    <input  autocomplete="off"  type="text" class="layui-input" name="partsName" placeholder="配件名称">
                                </div>
    <!--                            <label class="layui-form-label">规格型号</label>-->
    <!--                            <div class="layui-input-inline">-->
    <!--                                <input  autocomplete="off"  type="text" class="layui-input" name="partsNum" placeholder="物料号">-->
    <!--                            </div>-->

                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe666;</i>重置</button>
                                </div>
                            </div>
                        </div>

                    </form>
                    <div class="layui-card-body">

                        <table class="layui-table" id="partsTable" lay-filter="partsTable">
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="demoTable">
                    <button type="button" class="layui-btn" data-dismiss="modal">关闭</button>
    <!--                <button type="button" class="layui-btn" onClick="selectPartsClick()">添加</button>-->
                    <button class="layui-btn" data-type="getCheckData">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 选择配件  弹窗  结束 -->

    <!-- 添加供应商  弹窗  开始 -->
    <div class="modal fade" id="selectGysModal" tabindex="-1" role="dialog" aria-labelledby="gysModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="gysModalLabel">
                        选择供应商
                    </h4>
                </div>
                <div class="modal-body">

                    <form class="layui-form x-center" id="searchGysForm">
                        <div class="layui-form-pane">
                            <div class="layui-form-item" style="padding-left: 3%">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <input  autocomplete="off"  type="text" class="layui-input" name="supplierName" placeholder="名称">
                                </div>
                                <label class="layui-form-label">联系人</label>
                                <div class="layui-input-inline">
                                    <input  autocomplete="off"  type="text" class="layui-input" name="contactNameSelect" placeholder="联系人">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="gysSreach"><i class="layui-icon">&#xe615;</i>搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe666;</i>重置</button>
                                </div>
                            </div>
                        </div>

                    </form>
                    <div class="layui-card-body">

                        <table class="layui-table" id="gysTable" lay-filter="gysTable">
                        </table>
                    </div>
                    <div class="layui-form-item" style="margin-top: 8px;">
                        <table class="layui-table" >
                            <thead>
                            <tr>
                                <th style="width: 30%">供应商名称</th>
                                <th style="width: 30%">供应商联系人</th>
                                <th style="width: 30%">供货商料号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{nowSelectGysList.supplierName}}</td>
                                <td>{{nowSelectGysList.contact}}</td>
                                <td>
                                    <input  autocomplete="off"  type="text" name="supplierNum" lay-filter="supplierNum" v-model="nowSelectGysList.supplierNum" placeholder="请输入供货商料号" class="layui-input">
                                </td>

                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer" id="demoTable2">
                    <button type="button" class="layui-btn" data-dismiss="modal">关闭</button>
                    <!--                <button type="button" class="layui-btn" onClick="selectPartsClick()">添加</button>-->
                    <button class="layui-btn" @click="getSelectGysData">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 选择配件  弹窗  结束 -->

    <div class="modal fade" id="upImgModal" tabindex="-1" role="dialog" aria-labelledby="upImgModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">

                    <form class="layui-form" id="upImgForm">
                        <div class="layui-form-pane">
                            <div class="layui-upload"  style="margin-top: 8px;">
                                <button type="button" class="layui-btn" id="test1">图片上传</button>
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    图片预览：
                                    <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list1">

                                    </div>
                                </blockquote>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="layui-btn" data-dismiss="modal">关闭</button>
                    <!--                <button type="button" class="layui-btn" onClick="selectPartsClick()">添加</button>-->
                    <button class="layui-btn" @click="upImgData">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 选择配件  弹窗  结束 -->

</div>

<script type="text/html" id="barDemo">
    <a title="选择" lay-event="view" class="ml-5 layui-btn-xs layui-btn" style="text-decoration:none">选择</a>
</script>

<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script src="../../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../../js/vue.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>

    layui.use(['laydate', 'table','form', 'layer','upload','laytpl'],
        function () {
            var laydate = layui.laydate;
            var $ = layui.jquery;
            laytpl = layui.laytpl;
            okLoading.close($);
            getWarehouse();

            laydate.render({
                elem: '#dueDate', //指定元素
                trigger: 'click',
                type: 'date',
                done: function (value, date, endDate) {
                    vm.rp.dueDate = value
                }
            });
            laydate.render({
                elem: '#joinTime',
                type: 'date',
            });


        });

    /* 获取库房 下拉框 */
    function getWarehouse(){
        document.getElementById("warehouseId").innerHTML = "";
        $.ajax({
        	type:"get",
            url:baseHead + "kf/partsJoinWarehouse/getJoinWarehouseBasicData",
            data:{
                userId :$userId,
            },
            headers: {
                "token": $token,
            },
            success:function(res){
                if(res.code === 0){
                    $("#warehouseId").append("<option value=''>请选择库房</option>");
                    for(var i =0;i < res.data.WarehouseTypeData.length;i++){
                        $("#warehouseId").append("<option value=\""+res.data.WarehouseTypeData[i].id+"-"+res.data.WarehouseTypeData[i].name+"\">"+res.data.WarehouseTypeData[i].name+"</option>");
                    }
                    //重新渲染
                    layui.form.render("select");
                }else{
                    layer.msg(res.message);
                }
            }
        });
    };

    /*打开选择配件弹窗*/
    function openSelectPartsModal(){
        // document.getElementById("addProLinkmanForm").reset();

        setTimeout(() => {
            $('#selectPartsModal').modal('show');
        }, 800);
    };

    // /*打开选择供应商弹窗*/
    // function openSelectGysModal(){
    //     $('#selectGysModal').modal('show');
    // };

    /*弹窗关闭*/
    function closeMe(){
        $('#selectPartsModal').modal('hide');
    }

    $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
        if(event.type === "mouseenter"){
            //鼠标悬浮
            $(this).children(".info").fadeIn("fast");
            $(this).children(".handle").fadeIn("fast");
        }else if(event.type === "mouseleave") {
            //鼠标离开
            $(this).children(".info").hide();
            $(this).children(".handle").hide();
        }
    });
    // 删除图片
    $(document).on("click", ".file-iteme .handle", function(event){
        $(this).parent().remove();
    });

    const vm = new Vue({
        el: "#app",
        data: {
            totalQian:0,
            nowLoginUser:{},
            buyerUser:[],
            jsonDataMaterialInPartsList:[],
            nowSelectPartId:'',
            nowSelectGysList:{},
            updatePartsGysIndex: '',
            upImgIndex:'',
            upImgUrl:[],
            upImgNum:''
            // projectId:[],
            // rp: {
            //     id: null,
            //     billType: null,
            //     billAmount: null,
            //     dueDate: null,
            //     personInChargeOfTheBill: null,
            //     relatedCustomers: null,
            //     associatedItems: null,
            //     relatedContract: null,
            //     payer: null,
            //     remark: null,
            //     type: null,
            //     skUnit: null,
            //     yfDate: null,
            // }
        },
        created() {
            this.getLoginUser();

        },
        computed: {},
        methods: {
            // getNum: function (e) {
            //     this.totalQian = Number(e.data+)
            // },
            openMsg: function (str) {
                const strdata = "{\"title\": \"\", \"id\": 123,\"start\": 0,\"data\": [";
                let imgdata = "";
                const arr = str.split("|");
                for(let i = 0 ; i < arr.length ; i++){
                    if(i == 0){
                        imgdata = imgdata + "{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i] + "\",\"thumb\": \"\" }";
                    }else{
                        imgdata = imgdata + ",{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+arr[i]  + "\",\"thumb\": \"\" }";
                    }
                }
                const jsondata = strdata + imgdata + "]}";
                const obj = JSON.parse(jsondata);
                layer.photos({
                    photos: obj
                    ,shift: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            },
            getLoginUser: function() {
                var that = this;
                let request = {
                    url: 'user/findUser',
                    data: {
                        userId: $userId,
                        recordId:$userId
                    },
                    method: "post"
                }
                sendRequest(request, (res) => {
                    that.nowLoginUser = res.data;
                })
            },

            openSelectGysModal: function (index) {
                this.updatePartsGysIndex = index;
                this.nowSelectGysList = {};
                /*打开选择供应商弹窗*/
                $('#selectGysModal').modal('show');

            },
            getSelectGysData: function () {
                if (JSON.stringify(this.nowSelectGysList) === '{}'){
                    layer.msg("请选择供应商！", {
                        icon: 7
                    });
                }else {
                    this.closeGysModal();
                    // this.jsonDataMaterialInPartsList[updatePartsGysIndex]
                }
            },
            upImgData: function () {
                var that = this;
                var imgUrlArr = [];
                $("#uploader-list1 img").each(function () {
                    imgUrlArr.push($(this).attr("src").split('=')[1]);
                });

                if (that.upImgNum === 1) {
                    that.jsonDataMaterialInPartsList[that.upImgIndex].siteImg = imgUrlArr.join("|");

                    that.jsonDataMaterialInPartsList[that.upImgIndex].siteImgNum = imgUrlArr.length;
                }else if (that.upImgNum === 2) {
                    that.jsonDataMaterialInPartsList[that.upImgIndex].partsmsgImg = imgUrlArr.join("|");
                    that.jsonDataMaterialInPartsList[that.upImgIndex].partsmsgImgNum = imgUrlArr.length;
                }else if (that.upImgNum === 3) {
                    that.jsonDataMaterialInPartsList[that.upImgIndex].payEvidenceImg = imgUrlArr.join("|");
                    that.jsonDataMaterialInPartsList[that.upImgIndex].payEvidenceImgNum = imgUrlArr.length;
                }
                that.closeUpImgModal();

                // kfPartsmsgJson.siteImg = that.jsonDataMaterialInPartsList[i].siteImg;
                // kfPartsmsgJson.partsmsgImg = that.jsonDataMaterialInPartsList[i].partsmsgImg;
                // kfPartsmsgJson.payEvidenceImg = that.jsonDataMaterialInPartsList[i].payEvidenceImg;
                // if (JSON.stringify(this.nowSelectGysList) === '{}'){
                //     layer.msg("请选择供应商！", {
                //         icon: 7
                //     });
                // }else {
                //     this.closeGysModal();
                //     // this.jsonDataMaterialInPartsList[updatePartsGysIndex]
                // }
            },
            /*弹窗关闭*/
            closeMe: function() {
                $('#selectPartsModal').modal('hide');
            },
            closeGysModal: function() {

                $('#selectGysModal').modal('hide');
            },
            closeUpImgModal: function() {

                $('#upImgModal').modal('hide');
            },

            openEditPage: function (index,url,num) {
                var that = this;
                that.upImgIndex = index;
                that.upImgUrl = url;
                that.upImgNum = num;
                $('#upImgModal').modal('show');

                $('#uploader-list1').empty();
                if (that.upImgUrl != ""){
                    var imgArr = that.upImgUrl.split("|");
                    for(var i = 0; i < imgArr.length; i++) {
                        $('#uploader-list1').append(
                            '<div id="" class="file-iteme">' +
                            '<div class="handle"><span class="glyphicon glyphicon-trash" ></span></div>' +
                            '<img class="upImgUrl" style="width: 100px;height: 100px;" src='+ baseHead +'/other/viewUploadFile?id='+imgArr[i]+'>' +
                            // '<div class="info">' + res.name + '</div>' +
                            '</div>'
                        );
                    }
                }


                // sessionStorage.setItem('imgUrlData',JSON.stringify(item));
                // this.admin_add2('编辑', 'parts_img_edit.html', '70%', '70%')
            },
            admin_add2:function (title, url, w, h) {
                layer.open({
                    type: 2,
                    area: [w, h],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    offset: ['20px', '20px'],
                    title: title,
                    content: url
                });
            }

        },
        mounted() {
            var that = this;
            layui.use(['table', 'form', 'upload','layer'], function() {
                var table = layui.table;
                var form = layui.form;
                var upload = layui.upload;
                // var $ = layui.$;
                var picUrl = null ;
                var oldUrl = null;



                var t1 = table.render({
                    elem: '#partsTable',
                    url: $baseUrl + 'kf/parts/getParts',
                    where: {
                        userId: $userId,
                    },
                    headers: {
                        token: $token
                    }
                    , toolbar: '#toolbarDemo'
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data.partsData //解析数据列表
                        };
                    }

                    ,cols: [
                        [
                            {
                                type:'checkbox',
                                fixed: 'left'
                            },
                            // {
                            //     type: 'numbers',
                            //     title: '序号',
                            //     width: '6%',
                            //     fixed: 'left'
                            // },
                            {
                                field: 'partsNum',
                                title: '物料号',
                                width: 190,

                            },
                            {
                                field: 'partsName',
                                title: '配件名称',
                                width: 200,
                            },
                            {
                                field: 'specification',
                                title: '规格型号',
                                width: 230,
                            },
                            {
                                field: 'partsCount',
                                title: '库存数量',
                                width: 170,
                            },
                            // {
                            //     title: '物料图册',
                            //     width: '15%',
                            //     templet(item) {
                            //         return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn" @click="openMsg(item.partsmsgImg)">' +
                            //             '<i class="layui-icon">&#xe64a;</i>' +
                            //             '{{item.partsmsgImgNum}}' +
                            //             '</button>';
                            //     }
                            // }
                            // , {
                            //     title: '操作',
                            //     templet: '#barDemo',
                            //     fixed: 'right',
                            //     width: '8%'
                            // }
                            ]
                    ],
                    request: {
                        pageName: 'page', //页码的参数名称，默认：page
                        limitName: 'size',
                    },
                    response: {
                        statusName: 'code' //规定数据状态的字段名称，默认：code
                        ,
                        statusCode: 0 //规定成功的状态码，默认：0
                        ,
                        msgName: 'msg' //规定状态信息的字段名称，默认：msg
                        ,
                        countName: 'count' //规定数据总数的字段名称，默认：count
                        ,
                        dataName: 'data', //规定数据列表的字段名称，默认：data
                    },
                    id: 'partsTable',
                    page: true,
                    height: 'auto',
                    even: true,
                    done: function (res, curr, count) {
                        //是否有权限或权限是否失效
                        authorizeState();
                    }
                });
                var t2 = table.render({
                    elem: '#gysTable',
                    url: $baseUrl + 'kf/supplier/getSupplier',
                    where: {
                        userId: $userId,
                        // partsId:this.nowSelectPartId
                    },
                    headers: {
                        token: $token
                    }
                    , toolbar: '#toolbarDemo'
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data.SupplierData //解析数据列表
                        };
                    }

                    ,cols: [
                        [
                            {
                                type:'radio',
                                fixed: 'left',
                                width: 70,
                            },
                            // {
                            //     type: 'numbers',
                            //     title: '序号',
                            //     width: '6%',
                            //     fixed: 'left'
                            // },
                            {
                                field: 'supplierName',
                                title: '供应商名称',
                                width: 393,
                            },
                            {
                                // field: 'specification',
                                title: '联系方式',
                                width: 392,
                                templet(item) {
                                    // var backLinkmanArr1 = item.concat().replace('{','').replace('}','');
                                    return '<span>'+item.contact.replace('|','-')+'</span>';

                                }
                            }
                        ]
                    ],
                    request: {
                        pageName: 'page', //页码的参数名称，默认：page
                        limitName: 'size',
                    },
                    response: {
                        statusName: 'code' //规定数据状态的字段名称，默认：code
                        ,
                        statusCode: 0 //规定成功的状态码，默认：0
                        ,
                        msgName: 'msg' //规定状态信息的字段名称，默认：msg
                        ,
                        countName: 'count' //规定数据总数的字段名称，默认：count
                        ,
                        dataName: 'data', //规定数据列表的字段名称，默认：data
                    },
                    id: 'gysTable',
                    page: true,
                    height: 'auto',
                    even: true,
                    done: function (res, curr, count) {
                        //是否有权限或权限是否失效
                        authorizeState();
                    }
                });

                let request = {
                    url: 'user/findUserSelect',
                    data: {
                        userId: $userId,
                    },
                    method: "GET"
                }
                sendRequest(request, (res) => {
                    that.buyerUser = res.data;
                    setTimeout(function (){
                        form.render();
                    },1000)

                })

                form.on('submit(sreach)', function(data) {
                    var partsNum = data.field.partsNum;
                    var partsName = data.field.partsName;

                    table.reload('partsTable', {
                        where: { //设定异步数据接口的额外参数，任意设
                            partsNum: partsNum,
                            partsName: partsName,
                        },
                    });
                    return false;
                })
                form.on('submit(gysSreach)', function(data) {
                    var supplierName = data.field.supplierName;
                    var contactNameSelect = data.field.contactNameSelect;

                    table.reload('gysTable', {
                        where: { //设定异步数据接口的额外参数，任意设
                            supplierName: supplierName,
                            contactNameSelect: contactNameSelect,
                        },
                    });
                    return false;
                })

                // //头工具栏事件
                // table.on('toolbar(gysTable)', function(obj){
                //     let data = obj.data; //获得当前行数据
                //     let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                //     if (layEvent === 'getSelectGysData') { //获取选择供应商
                //
                //         // if (data.delFlag === -1) {
                //         //     layer.msg("合同已终结，不能上传附件！", {
                //         //         icon: 7
                //         //     });
                //         // } else {
                //         //     admin_add('合同附件信息', 'contract_file_list.html?contractId=' + data.id)
                //         // }
                //
                //     }
                // });

                //监听表格单选框选择
                table.on('radio(gysTable)', function(obj){
                    obj.data.supplierNum = '',
                    that.jsonDataMaterialInPartsList[that.updatePartsGysIndex].supplierGys = obj.data;
                    that.nowSelectGysList = obj.data;

                });

                var $ = layui.$, active = {
                    getCheckData: function(){ //获取选中数据
                        var checkStatus = table.checkStatus('partsTable')
                            ,data = checkStatus.data;
                        if (JSON.stringify(data).length ===0) {
                            layer.msg("请选择配件！", {
                                icon: 7
                            });
                            return false;
                        }

                        for (var i=0;i<data.length;i++){
                            data[i].joinCount = '';
                            data[i].partsOneprice = '';
                            // data[i].partsAllprice = '';
                            data[i].supplierGys = {};
                            data[i].siteImg = '';
                            data[i].siteImgNum = 0;
                            data[i].partsmsgImg = data[i].partsImg;
                            if (data[i].partsImg == null || data[i].partsImg == '') {
                                data[i].partsmsgImgNum = 0;
                            }else {
                                data[i].partsmsgImgNum = data[i].partsImg.split("|").length;
                            }
                            // data[i].partsmsgImgNum = data[i].partsImg.split("|").length;
                            data[i].payEvidenceImg = '';
                            data[i].payEvidenceImgNum = 0;
                        }
                        that.jsonDataMaterialInPartsList = data;
                        // localStorage.setItem('materialInPartsList',JSON.stringify(data));
                        // $("#ttt").empty();
                        that.closeMe();
                        // that.show();
                    }
                };

                $('#demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                //普通图片上传
                //执行实例
                // var index = null;
                // var uploadInst = upload.render({
                //     elem: '#upImage'
                //     ,url: baseHead+'other/fileUpload1' //改成您自己的上传接口
                //     ,before: function(obj){
                //         //预读本地文件示例，不支持ie8
                //         obj.preview(function(index, file, result){
                //             $('#demo1').attr('src', result); //图片链接（base64）
                //         });
                //         index = layer.load();
                //     }
                //     ,done: function(res){
                //         //如果上传成功
                //         layer.close(index);
                //         if(res.code == 0){
                //             picUrl = res.data;
                //         }
                //         else {
                //             layer.alert("上传失败，请重新上传！");
                //         }
                //     }
                //     ,error: function(){
                //         //演示失败状态，并实现重传
                //         var demoText = $('#demoText');
                //         demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                //         demoText.find('.demo-reload').on('click', function(){
                //             uploadInst.upload();
                //         });
                //     }
                // });

                //多图片上传
                upload.render({
                    elem: '#test2'
                    ,url: baseHead+'other/fileUpload1' //改成您自己的上传接口
                    ,multiple: true
                    ,before: function(obj){
                        layer.msg('图片上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 0
                        })
                    }
                    ,done: function(res){
                        layer.close(layer.msg());//关闭上传提示窗口
                        if(res.code == 0){
                            // picUrl = res.data;
                            //上传完毕
                            $('#uploader-list').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle"><span class="glyphicon glyphicon-trash" ></span></div>' +
                                '<img class="upImgUrl" style="width: 100px;height: 100px;" src='+ baseHead +'/other/viewUploadFile?id='+res.data+'>' +
                                // '<div class="info">' + res.name + '</div>' +
                                '</div>'
                            );
                        }
                        else {
                            layer.alert("上传失败，请重新上传！");
                        }

                    }
                });

                //多图片上传1
                upload.render({
                    elem: '#test1'
                    ,url: baseHead+'other/fileUpload1' //改成您自己的上传接口
                    ,multiple: true
                    ,before: function(obj){
                        layer.msg('图片上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 0
                        })
                    }
                    ,done: function(res){
                        layer.close(layer.msg());//关闭上传提示窗口
                        if(res.code == 0){
                            // picUrl = res.data;
                            //上传完毕
                            $('#uploader-list1').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle"><span class="glyphicon glyphicon-trash" ></span></div>' +
                                '<img class="upImgUrl" style="width: 100px;height: 100px;" src='+ baseHead +'/other/viewUploadFile?id='+res.data+'>' +
                                // '<div class="info">' + res.name + '</div>' +
                                '</div>'
                            );
                        }
                        else {
                            layer.alert("上传失败，请重新上传！");
                        }

                    }
                });
                form.on('submit(sub)', function (data) {
                    // if(picUrl == null){
                    //     picUrl = oldUrl;
                    // }
                    var arrayImgs = [];
                    // var imgsTotalUrl = '';
                    $("div.file-iteme img.upImgUrl").each(function () {
                        arrayImgs.push($(this).attr("src").split('=')[1]);
                        // imgsTotalUrl += $(this).attr("src").split('=')[1] +  "|" ;
                    });
                    var val = {};
                    val.userId = $userId;
                    val.joinWarehouseType = data.field.joinWarehouseType;
                    val.warehouseType = data.field.warehouseType;
                    val.warehouseId = data.field.warehouseId.split('-')[0];
                    val.buyerId = data.field.buyerId.split('-')[0];
                    val.joinerId = $userId;
                    val.joinTime = data.field.joinTime;
                    val.remark = data.field.remark;
                    val.otherEvidenceImg = arrayImgs.join("|");
                    val.warehouseName = data.field.warehouseId.split('-')[1];
                    val.joinerName = that.nowLoginUser.nickname;
                    val.buyerName = data.field.buyerId.split('-')[1];
                    var kfPartsmsgListArr = [];

                    for(var i = 0; i < that.jsonDataMaterialInPartsList.length; i++) {
                        var kfPartsmsgJson = {};
                        kfPartsmsgJson.partsId = that.jsonDataMaterialInPartsList[i].id;
                        if (that.jsonDataMaterialInPartsList[i].joinCount == ""){
                            layer.alert("请输入入库数量", {
                                icon: 7
                            })
                            return false;
                        }
                        kfPartsmsgJson.joinCount = that.jsonDataMaterialInPartsList[i].joinCount;
                        if (that.jsonDataMaterialInPartsList[i].partsOneprice == ""){
                            layer.alert("请输入配件单价", {
                                icon: 7
                            })
                            return false;
                        }
                        kfPartsmsgJson.partsOneprice = that.jsonDataMaterialInPartsList[i].partsOneprice;
                        kfPartsmsgJson.partsAllprice = (that.jsonDataMaterialInPartsList[i].joinCount)*(that.jsonDataMaterialInPartsList[i].partsOneprice);
                        kfPartsmsgJson.partsmsgRemark = that.jsonDataMaterialInPartsList[i].partsmsgRemark;
                        if ($.isEmptyObject(that.jsonDataMaterialInPartsList[i].supplierGys)){
                            layer.alert("请选择供应商", {
                                icon: 7
                            })
                            return false;
                        }
                        kfPartsmsgJson.supplierId = that.jsonDataMaterialInPartsList[i].supplierGys.id;
                        kfPartsmsgJson.supplierNum = that.jsonDataMaterialInPartsList[i].supplierGys.supplierNum;
                        kfPartsmsgJson.site = that.jsonDataMaterialInPartsList[i].site;
                        kfPartsmsgJson.siteImg = that.jsonDataMaterialInPartsList[i].siteImg;
                        kfPartsmsgJson.partsmsgImg = that.jsonDataMaterialInPartsList[i].partsmsgImg;
                        kfPartsmsgJson.payEvidenceImg = that.jsonDataMaterialInPartsList[i].payEvidenceImg;
                        // kfPartsmsgJson.siteImg = "/DSFSDFSDF/ASDAS";
                        // kfPartsmsgJson.partsmsgImg = "/DSFSDFSDF/ASDAS";
                        // kfPartsmsgJson.payEvidenceImg = "/DSFSDFSDF/ASDAS";
                        kfPartsmsgListArr.push(kfPartsmsgJson);
                    }
                    // val.kfPartsmsgList = that.jsonDataMaterialInPartsList;
                    if (kfPartsmsgListArr.length < 1){
                        layer.alert("请选择入库配件", {
                            icon: 5
                        })
                        return false;
                    }
                    val.kfPartsmsgList =JSON.stringify(kfPartsmsgListArr);

                    let request = {
                        url: 'kf/partsJoinWarehouse/partsJoinWarehouse',
                        data: val,
                        method: "post",
                    };
                    sendRequest(request, (data) => {
                        if (data.code === 0) {
                            layer.alert("操作成功", {
                                    icon: 6
                                },
                                function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.location.reload();

                                });
                        } else {
                            layer.alert(data.msg, {
                                icon: 5
                            })
                        }
                    });
                    return false;
                });

            });
        }


    });

    // setTimeout(() => {
    //     //修改状态
    //     let form = layui.form;
    //     //账单类型
    //     let request = {
    //         url: 'dictionary/findDataDictionaryValue',
    //         data: {
    //             userId: $userId,
    //             label: 'BILL_TYPE'
    //         },
    //         method: "POST",
    //     };
    //     sendRequest(request, (res) => {
    //         let x = res.data;
    //         $.each(x, function (index, item) {
    //             let opt = $("<option value=" + item + ">" + item + "</option>");
    //             $("select[name=billType]").append(opt);
    //
    //         });
    //
    //         $("select[name=billType]").val(vm.rp.billType);
    //
    //         form.render('select');
    //     });
    // }, 300)

</script>

</body>

</html>
